<template>
  <div>
    <div>
      <el-tooltip class="item" effect="dark" content="地图工具" placement="bottom">
        <i class="iconfont icon-hanbao" v-show="!toolVisible" @click="toolVisible= !toolVisible"></i>
      </el-tooltip>
    </div>
    <div class="tool" v-show="toolVisible">
      <div class="top">
        <!-- <div>{{title}}</div> -->
        <div
          class="item"
          v-for="(item,index) in tools.top"
          :key="index"
          @click="tools.top[index].isActive = !tools.top[index].isActive"
        >
          <div class="border" v-if="item.border">
            <i :class="item.icon"></i>
            <span v-if="item.text">{{item.text}}</span>
          </div>
          <div v-else>
            <i :class="item.icon"></i>
            <span v-if="item.text">{{item.text}}</span>
          </div>
        </div>
        <div class="menu">
          <i class="iconfont icon-hanbao" @click="toolVisible = !toolVisible"></i>
        </div>
      </div>
      <div class="bottom">
        <div
          class="item"
          v-for="(item,index) in tools.bottom"
          :key="index"
          :style="item.style"
          @click="changeBottomActive(index)"
        >
          <div class="active" v-if="item.isActive">
            <i :class="item.icon" :title="item.tooltip" @click="item.handle" v-if="item.handle"></i>
            <i :class="item.icon" :title="item.tooltip" v-else></i>
            <span v-if="item.text">
              {{item.text}}
              <span v-if="item.location">{{item.location}}</span>
            </span>
          </div>
          <div v-else>
            <i :class="item.icon" :title="item.tooltip" @click="item.handle" v-if="item.handle"></i>
            <i :class="item.icon" :title="item.tooltip" v-else></i>
            <span v-if="item.text">
              &nbsp;&nbsp;{{item.text}}
              <span v-if="item.location">{{item.location}}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as bottomData from "./toolBottom.js"; // 底部工具栏默认数据引入
import * as topData from "./toolTop.js"; // 顶部部工具栏默认数据引入
import * as Image from "./mkImage.js"; // 截图函数引入
// import * as SgisMap from "../utils/map/sgis.map.base.js";
export default {
  name: "MapTool",
  props: ["options", "image"],
  data() {
    return {
      toolVisible: false, // 工具栏的可见性
      shotImageParams: {
        el: "map",
        insertEl: "insertImage"
      }, // 截图传递的参数
      tools: {
        top: [],
        bottom: []
      },
      fullel: "map"
    };
  },
  created() {
    this.initTop();
    this.initBottom();
    this.activeStatus();
  },
  methods: {
    initTop() {
      this.tools.top = topData.data;
      try {
        if (this.options && this.options.hasOwnProperty("top")) {
          this.tools.top = this.options.top;
        }
      } catch (err) {
        console.log(err);
      }
    },
    initBottom() {
      this.tools.bottom = bottomData.data;
      try {
        if (this.options && this.options.hasOwnProperty("bottom")) {
          this.tools.bottom = this.options.bottom;
        }
      } catch (err) {
        console.log(err);
      } // 底部按钮显示赋值

      // 截图元素赋值
      if (this.image) {
        this.shotImageParams = this.image;
      }
      // 循环底部工具栏
      for (const key in this.tools.bottom) {
        for (const keyC in this.tools.bottom[key]) {
          if (this.tools.bottom[key][keyC]) {
            switch (keyC) {
              case "screenMap":
                this.tools.bottom[key].handle = this.screenshot;
                break;
              case "screenFull":
                this.tools.bottom[key].handle = this.fullScreen;
                this.fullel = this.tools.bottom[key].id;
            }
          }
        }
      }
    },
    // 全屏显示函数
    fullScreen() {
      Image.fullScreen(this.fullel);
    },
    // 初始化按钮点击状态
    activeStatus() {
      for (const key in this.tools.top) {
        this.tools.top[key].isActive = false;
      }
      for (const key in this.tools.bottom) {
        this.tools.bottom[key].isActive = false;
      }
    },
    // 点击图标改变显示状态
    changeBottomActive(index) {
      for (const key in this.tools.bottom) {
        this.tools.bottom[key].isActive = false;
      }
      this.tools.bottom[index].isActive = !this.tools.bottom[index].isActive;
      // 触发页面渲染操作
      const arr = this.tools.bottom.slice(0);
      this.$set(this.tools, "bottom", arr);
    },
    // 截图操作函数
    screenshot() {
      Image.screenshot(this.shotImageParams);
    }
  }
};
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
@import "./../../assets/css/icon-font/iconfont.css";
$backColorBottom: #195f90;
$backColorTop: #1f77b4;
$hoverBackColor: #4c92c3;
$hei: 40px; //上下2个框高度
$topWidth: 90px; //上面盒子元素每个元素所占的宽度
$bottomWidth: 45px; // 下面盒子元素每个元素占得宽度
// $opacity: 0.5; //元素悬停时透明度设置
$hoverColor: #fff; //工具栏字体颜色
$color: #8ab8d8; //悬停时字体颜色
$paddleft: 5px;
$line: #408bbf; //分割线颜色
.tool {
  width: 600px;
  height: 80px;
  border-radius: 5px;
  color: $color;
  box-sizing: border-box;
  font-family: "黑体";
  .top {
    background-color: $backColorTop;
    box-sizing: border-box;
    height: $hei;
    padding-left: $paddleft;
    font-style: bold;
    > div {
      display: inline-block;
      height: $hei;
      line-height: $hei;
      text-align: center;
      max-width: 120px;
      box-sizing: border-box;
    }
    > div.item {
      width: $topWidth;
    }
    > div.item:hover {
      background-color: $hoverBackColor;
      color: $hoverColor;
    }
    .menu {
      display: inline-block;
      height: $hei;
      line-height: $hei;
      float: right;
      padding-top: 3px;
      padding-right: 15px;
    }
    .menu:hover {
      color: $hoverColor;
    }
    .border {
      border-right: 1px solid $line;
    }
  }
  .bottom {
    background-color: $backColorBottom;
    box-sizing: border-box;
    height: $hei;
    padding-left: $paddleft;
    > div.item {
      display: inline-block;
      height: $hei;
      line-height: $hei;
      text-align: center;
    }
    > div.item {
      width: $bottomWidth;
    }
    > div.item:hover {
      background-color: $hoverBackColor;
      color: $hoverColor;
    }
  }
  .active {
    background-color: $hoverBackColor !important;
    color: $hoverColor !important;
  }
}
</style>